<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础功能</text>
         <view class="uv-demo-block__content">
            <uv-code
               ref="uCode"
               @change="codeChange"
               :seconds="20"
               change-text="XS获取"
               @start="disabled1 = true"
               @end="disabled1 = false"
            ></uv-code>
            <uv-button
               @tap="getCode"
               :text="tips"
               type="success"
               size="small"
               :disabled="disabled1"
            ></uv-button>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title"
            >保持倒计时(开始后，左上角返退出此页面再进入，会发现倒计时还在继续)</text
         >
         <view class="uv-demo-block__content">
            <uv-code
               ref="uCode1"
               @change="codeChange1"
               keep-running
               change-text="倒计时XS"
               @start="disabled2 = true"
               @end="disabled2 = false"
            ></uv-code>
            <uv-button
               type="primary"
               @tap="getCode1"
               :text="tips1"
               size="small"
               :disabled="disabled2"
            ></uv-button>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">文本样式</text>
         <view class="uv-demo-block__content">
            <uv-code
               ref="uCode2"
               @change="codeChange2"
               keep-running
               start-text="点我获取验证码"
            ></uv-code>
            <text @tap="getCode2" :text="tips2" class="uv-page__code-text">{{ tips2 }}</text>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const uCode = ref();
const uCode1 = ref();
const uCode2 = ref();

const tips = ref('');
const tips1 = ref('');
const tips2 = ref('');
const disabled1 = ref(false);
const disabled2 = ref(false);

const codeChange = (text: string) => {
   tips.value = text;
};
const codeChange1 = (text: string) => {
   tips1.value = text;
};
const codeChange2 = (text: string) => {
   tips2.value = text;
};

const getCode = () => {
   if (uCode.value.canGetCode) {
      // 模拟向后端请求验证码
      uni.showLoading({
         title: '正在获取验证码',
      });
      uni.$uv.sleep(2000).then(() => {
         uni.hideLoading();
         uni.$uv.toast('验证码已发送');
         uCode.value.start();
      });
   } else {
      uni.$uv.toast('倒计时结束后再发送');
   }
};
const getCode1 = () => {
   if (uCode1.value.canGetCode) {
      // 模拟向后端请求验证码
      uni.showLoading({
         title: '正在获取验证码',
      });
      uni.$uv.sleep(2000).then(() => {
         uni.hideLoading();
         uni.$uv.toast('验证码已发送');
         uCode1.value.start();
      });
   } else {
      uni.$uv.toast('倒计时结束后再发送');
   }
};
const getCode2 = () => {
   if (uCode2.value.canGetCode) {
      // 模拟向后端请求验证码
      uni.showLoading({
         title: '正在获取验证码',
      });
      uni.$uv.sleep(2000).then(() => {
         uni.hideLoading();
         uni.$uv.toast('验证码已发送');
         uCode2.value.start();
      });
   } else {
      uni.$uv.toast('倒计时结束后再发送');
   }
};
</script>

<style lang="scss" scoped>
.uv-page {
   &__code-text {
      color: $uv-primary;
      font-size: 15px;
   }
}

.uv-demo-block__content {
   @include flex;
}
</style>
